<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="我的订单" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="bg-[#fff]">
            <up-tabs :list="tabList" @click="tabcheck" :scrollable="true" :current="current" :lineColor="{color:'#46A7FD'}" :activeStyle="{color:'#46A7FD'}"></up-tabs>
        </view>
        <view class="px-[30rpx] py-[24rpx]" v-if="pageObj.type <= 5">
			<template v-for="(item,index) in list" :key="index">
				<orderItem :item="item" @comment="onComment" @detail="onDetatil" @cancel="onCancel" @continues="onContinues" ></orderItem>
			</template>
        </view>
		<view class="px-[30rpx] py-[24rpx]" v-else>
			<template v-for="(item,index) in list" :key="index">
				<refundItem :item="item"></refundItem>
			</template>
		</view>
    </view>
</template>

<script setup>
import { onLoad , onReachBottom , onShow } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
import orderItem from '@/components/orderItem.vue'
import refundItem from '@/components/refundItem.vue'
import { GetOrderCancel, GetOrderGood, GetOrderList, GetRefundPage } from '../../API/order';
import { showToast } from '../../utils/utils';
const { list , getList ,data , pageObj , getRefund } = useList()
const { goback , gohome } = useTab()
const { current , tabList , tabcheck } = useTable()
const { onDetatil , onCancel , onComment , onContinues } = useOn()
function useTab(){
	const goback = ()=>{
		uni.navigateBack();
	}
	const gohome = ()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	return { goback , gohome }
}
function useOn(){
	const onDetatil = (e) =>{
		uni.navigateTo({
			url:'/pageOrder/orderItem/orderItem?id='+e
		})
	}
	const onCancel = (e)=>{
		uni.showModal({
			title: '提示',
			content: '是否取消订单',
			showCancel: true,
			success: async ({ confirm, cancel }) => {
				if(confirm){
					let { data } = await GetOrderCancel(e)
					await getList()
				}
			}
		})
	}
	const onComment = (e)=>{
		uni.navigateTo({
			url:'/pageOrder/orderItem/orderItem?id='+e
		})
	}
	const onContinues = (e)=>{
		GetOrderGood(e.orderId).then(res=>{
			res.data.carVoList = res.data.orderPageVoList.map(item=>{
				return item
			})
			uni.navigateTo({
		    	url:'/pageOrder/ConfirmOrder/ConfirmOrder?order='+JSON.stringify(res.data)
			})
		}).catch(err=>{})
	}
	return { onDetatil , onCancel , onComment , onContinues  }
}
function useTable(){
	const current = ref(0)
	const tabList = ref([
	{
		name: '全部',
		type: 0
	},{
		name: '待付款',
		type: 1
	},{
		name: '待发货',
		type: 2
	},{
		name: '待收货/待自提',
		type: 3
	},{
		name: '待评价',
		type: 4
	},{
		name:'已完成',
		type: 5
	},{
		name:'售后单',
		type: 6
	}
	])
	const tabcheck = async (e)=>{
		pageObj.type = e.type
		if(e.type == 6){
			await getRefund()
		}else{
			await getList()
		}
	}
	return { tabList , current , tabcheck}
}
function useList(){
	const list = ref([])
	const data = ref(0)
	const pageObj = reactive({
		pageNum:1,
		pageSize:10,
		type:0
	})
	const getList = async ()=>{
		let { rows , total} =  await GetOrderList(pageObj) 
		list.value = rows
		data.value = total
		console.log(data.value);
	}
	const getRefund = async ()=>{
		let { rows , total } = await GetRefundPage({
			pageNum:pageObj.pageNum,
			pageSize:pageObj.pageSize
		})
		list.value = rows
		data.value = total
	}
	return { list , getList , data , pageObj , getRefund }
}

onLoad((options)=>{
    current.value = options.current
})
onShow( async()=>{
	await getList()
})
onReachBottom(async ()=>{
	if(list.value.length < data.value){
		pageObj.pageNum++
		let { rows , total} =  await GetOrderList(pageObj)
		list.value = list.value.concat(rows)
		data.value = total
	}else{
		showToast('没有更多数据')
	}
})
</script>

<style lang="scss" scoped>

</style>